Ŀ¼
CSSÖУ¬Ä£Ê½Æ¥Å乿Ôò¹æ¶¨ÎĵµÊ÷ÖеÄÔªËØÓ¦¸ÃÊÊÓÃÄÄЩÑùʽ¹æÔò¡£ÕâЩģʽ£¬³ÆÎªÑ¡Ôñ×Ó£¬¿ÉÒÔÊǼòµ¥µÄÔªËØÃû»òÕßÊǸ´ÔÓµÄÉÏÏÂÎÄÏà¹ØµÄģʽ¡£Èç¹ûģʽÖеÄËùÓÐÌõ¼þ¶Ôijһ¸öÔªËØ¶¼ÎªÕ棬¸ÃÑ¡Ôñ×Ó¾ÍÆ¥ÅäÄǸöÔªËØ¡£
Ñ¡Ôñ×ÓÖеÄÎĵµÓïÑÔÔªËØÃûµÄ´óСдÃô¸ÐÐÔÈ¡¾öÓÚÎĵµÓïÑԵĴóСдÃô¸ÐÐÔ¡£ÀýÈ磬ÔÚHTMLÖУ¬ÔªËØÃûÊÇ´óСдÎ޹ص쬶øÔÚXMLÖУ¬ÊÇ´óСдÏà¹ØµÄ¡£
ÏÂÃæµÄ±í¸ñ¸ÅÀ¨ÁËCSS2Ñ¡Ôñ×ÓµÄÓï·¨£º
| ģʽ | º¬Òå | ¶¨ÒåÔÚ |
|---|---|---|
| * | Æ¥ÅäÈÎÒâÔªËØ¡£ | È«¾ÖÑ¡Ôñ×Ó |
| E | Æ¥ÅäÈÎÒâEÔªËØ£¨¼´ÀàÐÍΪEµÄÔªËØ£©¡£ | ÀàÐÍÑ¡Ôñ×Ó |
| E F | Æ¥ÅäEÔªËØºó´úµÄÈÎÒâFÔªËØ¡£ | ÅÉÉúÑ¡Ôñ×Ó |
| E > F | Æ¥ÅäEÔªËØ×ÓÔªËØµÄÈÎÒâFÔªËØ¡£ | ×ÓÑ¡Ôñ×Ó |
| E:first-child | µ±ÔªËØEÊÇÆä¸¸ÔªËØµÄµÚÒ»¸ö×ÓÔªËØÊ±£¬Æ¥ÅäEÔªËØ¡£ | :first-childαÀà |
| E:link E:visited | µ±ÔªËØEÊÇÒ»¸ö³¬Á¬½ÓµÄÁ´Ê±£¬Èç¹ûÄ¿±ê»¹Î´±»·ÃÎÊ£¨:link£©»òÒѾ·ÃÎÊ£¨:visited£©Ê±£¬Æ¥ÅäÔªËØE¡£ | Á¬½ÓαÀà |
| E:active E:hover E:focus | ÔÚÌØ¶¨µÄÓû§ÐÐΪʱ£¬Æ¥ÅäE¡£ | ¶¯Ì¬Î±Àà |
| E:lang(c) | Æ¥ÅäEÀàÐ͵ÄÔªËØ£¬Èç¹ûËüÒÔ£¨ÈËÀࣩÓïÑÔcд³É£¨ÎĵµÓïÑԹ涨ÈçºÎÈ·¶¨ÓïÑÔ£©¡£ | :lang()αÀà |
| E + F | Æ¥ÅäÈÎÒâFÔªËØ£¬Èç¹û½ô½ÓÔÚǰµÄÊÇEÔªËØ¡£ | ÏàÁÚÑ¡Ôñ×Ó |
| E[foo] | Æ¥ÅäÈÎÒâEÔªËØ£¬Èç¹ûËüÉèÖÃÁË"foo"ÊôÐÔ£¨²»¹ÜÖµÊÇʲô£©¡£ | ÊôÐÔÑ¡Ôñ×Ó |
| E[foo="warning"] | Æ¥ÅäÈÎÒâEÔªËØ£¬Èç¹ûËüÉèÖÃÁË"foo"ÊôÐÔ£¬²¢ÇÒÊôÐÔֵΪ"warning"¡£ | ÊôÐÔÑ¡Ôñ×Ó |
| E[foo~="warning"] | Æ¥ÅäÈÎÒâEÔªËØ£¬Èç¹ûËüµÄ"foo"ÊôÐÔÖµÊÇÒ»¸öÒÔ¿Õ¸ñ·Ö¸îµÄÁÐ±í£¬ÇÒÆäÖÐ֮һΪ"warning"¡£ | ÊôÐÔÑ¡Ôñ×Ó |
| E[lang|="en"] | Æ¥ÅäÈÎÒâEÔªËØ£¬ËüµÄ"lang"ÊôÐÔÖµÊÇÒ»¸öÒÔÁ¬×ֺŷָîµÄÁÐ±í£¬²¢ÇÒÒÔ"en"¿ªÍ·£¨´Ó×óµ½ÓÒË㣩¡£ | ÊôÐÔÑ¡Ôñ×Ó |
| DIV.warning | ½ö¶ÔHTMLÊÊÓ᣺ÍDIV[class~="warning"]¡£ | ÀàÑ¡Ôñ×Ó |
| E#myid | Æ¥ÅäÈÎºÎÆäIDΪ"myid"µÄEÔªËØ¡£ | IDÑ¡Ôñ×Ó |
Ò»¸ö¼òµ¥Ñ¡Ôñ×Ó»òÕßÊÇÒ»¸öÀàÐÍÑ¡Ôñ×Ó£¬»òÕßÊÇÒ»¸öÈ«¾ÖÑ¡Ôñ×Ó£¬½ô¸úÔÚºóµÄÊÇÁã¸ö»ò¶à¸öÊôÐÔÑ¡Ôñ×Ó£¬IDÑ¡Ôñ×Ó»òαÀ࣬´ÎÐòÈÎÒâ¡£Èç¹ûËüµÄËùÓÐÄÚÈݶ¼Æ¥Å䣬Ôò¼òµ¥Ñ¡Ôñ×ÓÆ¥Åä¡£
Ò»¸öÑ¡Ôñ×ÓÊÇÒ»¸ö»ò¶à¸ö¼òµ¥Ñ¡Ôñ×ÓÒÔ×éºÏ·û¹¹³ÉµÄÁ´¡£×éºÏ·û°üÀ¨£º¿Õ°×£¬">"ºÍ"+"¡£¿Õ°×¿ÉÒÔ³öÏÖÔÚÒ»¸ö×éºÏ·ûºÍ¼òµ¥Ñ¡Ôñ×ÓÖ®¼ä¡£
ÎĵµÊ÷ÖÐÆ¥ÅäÒ»¸öÑ¡Ôñ×ÓµÄÔªËØ³ÆÎªÄǸöÑ¡Ôñ×ÓµÄÖ÷Ìâ¡£°üº¬Ò»¸ö¼òµ¥Ñ¡Ôñ×ÓµÄÑ¡Ôñ×Ó£¬Æ¥ÅäÈÎÒâ·ûºÏËüÒªÇóµÄÔªËØ¡£½«¼òµ¥Ñ¡Ôñ×ÓºÍ×éºÏ·û½áºÏ³ÉÁ´¾ÍÔö¼ÓÁ˶îÍâµÄÆ¥ÅäÌõ¼þ£¬Òò´ËÑ¡Ôñ×ÓµÄÖ÷Ìâ×ÜÊÇÄÇЩ·ûºÏ×îÓҶ˵ļòµ¥Ñ¡Ôñ×ÓµÄÔªËØµÄ×Ó¼¯¡£
ÔÚÒ»¸öÁ´ÖеÄ×îºóÒ»¸ö¼òµ¥Ñ¡Ôñ×ÓÖ®ºó£¬¿ÉÒÔ¼ÓÒ»¸öÎ±ÔªËØ£¬ÕâʱËüµÄÑùʽÐÅÏ¢Ó¦Óõ½Ã¿Ò»¸öÖ÷ÌâµÄ×é³É²¿·Ö¡£
Èç¹û¼¸¸öÑ¡ÔñµÄÉùÃ÷ÀàËÆ£¬¿ÉÒÔ½«ËüÃÇ·Ö×éΪһ¸öÒÔ¶ººÅ·Ö¸îµÄÁÐ±í¡£
±¾ÀýÖУ¬ÎÒÃǽ«Èý¸öÏàͬµÄÉùÃ÷¹é²¢ÎªÒ»¸ö¡£Òò´Ë£¬
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
¾ÍµÈͬÓÚ£º
H1, H2, H3 { font-family: sans-serif }
CSS»¹ÌṩÆäËü¡°Ëõд¡±»úÖÆ£¬°üÀ¨¶àÖØÉùÃ÷ºÍËõдÊôÐÔ¡£
È«¾ÖÑ¡Ôñ×Ó£¬Ð´×ö"*"£¬Æ¥ÅäÈÎÒâÔªËØÀàÐÍÃû¡£ËüÆ¥ÅäÔÚÎĵµÊ÷ÖеÄÈÎÒâÒ»¸öÔªËØ¡£
Èç¹ûÈ«¾ÖÑ¡Ôñ×Ó²»ÊÇÒ»¸ö¼òµ¥Ñ¡Ôñ×ÓµÄΨһÄÚÈÝ£¬"*"¿ÉÒÔÊ¡ÂÔ¡£ÀýÈ磺
*[LANG=fr] ºÍ[LANG=fr]ÊÇÒ»ÑùµÄ¡£
*.warningºÍ.warningÊÇÒ»ÑùµÄ¡£
*#myidºÍ#myidÊÇÒ»ÑùµÄ¡£
ÀàÐÍÑ¡Ôñ×ÓÆ¥ÅäÎĵµÓïÑÔÔªËØÀàÐÍÃû¡£Ò»¸öÀàÐÍÑ¡Ôñ×ÓÆ¥ÅäÎĵµÊ÷ÖиÃÔªËØÀàÐ͵Äÿһ¸öʵÀý¡£
ÈçÏµĹæÔòÆ¥ÅäÎĵµÊ÷ÖÐËùÓеÄH1ÔªËØ£º
H1 { font-family: sans-serif }
ÓÐʱ£¬×÷Õß¿ÉÄÜÏ£ÍûÑ¡Ôñ×ÓÔÚÒ»¸öÔªËØÊÇÎĵµÊ÷ÖÐÁíÍâÒ»¸öÔªËØµÄºó´úʱ£¬Æ¥ÅäÄǸöÔªËØ£¨ÀýÈ磬¡°Æ¥ÅäÄÇЩ°üº¬ÔÚÒ»¸öH1ÔªËØÄÚµÄEMÔªËØ¡±£©¡£ÅÉÉúÑ¡Ôñ¾ÍÃèÊöÁËģʽÖÐÕâÑùµÄ¹ØÏµ¡£ÅÉÉúÑ¡Ôñ×ÓÓÐÁ½¸ö»ò¶à¸öÑ¡Ôñ×Ó×é³É£¬²¢ÒÔ¿Õ°×Ïà·Ö¸î¡£ÅÉÉúÑ¡Ôñ×ÓµÄÐÎʽΪ"A B"£¬ËüÆ¥ÅäÒ»¸öÔªËØB£¬µ±ÔªËØBÊÇÆäǰ±²ÔªËØAµÄÈÎÒâºó´úʱ¡£
ÀýÈ磬¿¼ÂÇÈçϹæÔò£º
H1 { color: red }
EM { color: red }
¾¡¹ÜÕâЩ¹æÔòµÄÓÃÒâÊÇͨ¹ý¸Ä±äÎı¾µÄÑÕÉ«À´¶ÔÎı¾½øÐÐÇ¿µ÷£¬µ«ÊÇÔÚÏÂÃæµÄÇé¿öÖоͻáʧȥǿ»¯Ð§¹û£º
<H1>±¾±êÌâ<EM>·Ç³£</EM>ÖØÒª</H1>
ÎÒÃÇÕâÑùÀ´¸Ä½øÕâÒ»Çé¿ö£ºÎÒÃǶÔǰÊöµÄ¹æÔò²¹³äÒ»¸ö¹æÔò£¬ÕâÒ»¹æÔò½«³öÏÖÔÚH1Ö®ÄÚÈκÎλÖõÄEMÔªËØµÄÎı¾ÑÕÉ«ÉèÖÃΪÀ¶É«£º
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
µÚÈý¸ö¹æÔò½«Æ¥ÅäÈçÏÂÓï¾äÖеÄEMÔªËØ£º
<H1>±¾<SPAN class="myclass">±êÌâ<EM>·Ç³£</EM>ÖØÒª</SPAN></H1>
ÏÂÃæµÄÑ¡Ôñ×Ó£º
DIV * P
Æ¥ÅäÒ»¸öPÔªËØ£¬Èç¹û¸ÃPÔªËØÊÇDIVÔªËØµÄËïÔªËØ»ò¸üºóµÄÔªËØ¡£Çë×¢Òâ"*"Á½±ßµÄ¿Õ°×¡£
ÏÂÃæ¹æÔòÖеÄÑ¡Ôñ×Ó½áºÏÁËÅÉÉúÑ¡Ôñ×ÓºÍÊôÐÔÑ¡Ôñ×Ó£¬ËüÆ¥ÅäÈκÎÔªËØ£¬Èç¹û(1)¸ÃÔªËØÉèÖÃÁË"href"ÊôÐÔ£»ÇÒ(2)°üº¬ÔÚÒ»¸öPÔªËØÄÚ£¬¶øPÔªËØÓÖ°üº¬ÔÚÒ»¸öDIVÔªËØÄÚ£º
DIV P *[href]
×ÓÑ¡Ôñ×ÓÆ¥ÅäÒ»¸öÔªËØ£¬µ±¸ÃÔªËØÊÇÁíÍâÒ»¸öÔªËØµÄ×ÓÔªËØÊ±¡£×ÓÑ¡Ôñ×ÓÓÐÁ½¸ö»ò¶à¸öÑ¡Ôñ×Ó¹¹³É£¬²¢ÒÔ">"·Ö¸î¡£
ÏÂÃæµÄ¹æÔò¼¯ÉèÖÃËùÓÐÊÇBODYÔªËØ×ÓÔªËØµÄPÔªËØµÄÑùʽ£º
BODY > P { line-height: 1.3 }
ÏÂÃæµÄÀý×Ó½áºÏÁËÅÉÉúÑ¡Ôñ×ÓºÍ×ÓÑ¡Ôñ×Ó£º
DIV OL>LI P
ËüÆ¥ÅäÒ»¸öLIÔªËØµÄºó´úPÔªËØ£»¶øLI±ØÐëÊÇOLÔªËØµÄ×ÓÔªËØ£»¶øOLÔªËØ±ØÐëÊÇDIVÔªËØµÄºó´ú¡£Çë×¢Ò⣬ÔÚ">"×éºÏ·ûÁ½¶Ë¿ÉÑ¡µÄ¿Õ°×ÒѾ±»Ê¡ÂÔ¡£
¹ØÓÚÑ¡ÔñÒ»¸öÔªËØµÄµÚÒ»¸ö×ÓÔªËØµÄÎÊÌ⣬Çë²Î¼ûÒÔϵÄ:first-childαÀàÒ»½Ú¡£
ÏàÁÚͬ°ûÑ¡Ôñ×ÓµÄÓ﷨Ϊ£ºE1 + E2£¬ÆäÖÐE2ÊÇÑ¡Ôñ×ÓµÄÖ÷Ìâ¡£¸ÃÑ¡Ôñ×ÓÆ¥ÅäµÄÌõ¼þÊÇ£ºÈç¹ûE1ºÍE2ÔÚÎĵµÊ÷Öи¸ÔªËØÏàͬ£¬ÇÒE1½ô½ÓÔÚE2֮ǰ£¬ÔòÑ¡Ôñ×ÓÆ¥ÅäÔªËØE2¡£
ÔÚijЩÇé¾°ÖУ¬ÏàÁÚÔªËØ²úÉúµÄ¸ñʽ»¯¶ÔÏó£¬ËüÃǵijÊÏÖÊÇ×Ô¶¯´¦ÀíµÄ£¨ÀýÈ磬ÏàÁÚ¿ØÖÆ¿òÖ®¼äµÄ´¹Ö±±ß¾àµÄÖØºÏ£©¡£"+"Ñ¡Ôñ×ÓÔÊÐí×÷Õß¶ÔÏàÁÚÔªËØÖ¸¶¨¸½¼ÓµÄÑùʽ¡£
Òò´Ë£¬ÏÂÃæµÄ¹æÔòÖ¸³ö£¬µ±Ò»¸öPÔªËØ½ô¸úÔÚÒ»¸öMATHÔªËØÖ®ºóʱ£¬Ëü²»Ó¦¸ÃËõ½ø£º
MATH + P { text-indent: 0 }
ÏÂÃæµÄÒ»¸öÀý×Ó£¬ËõСÁ˽ô¸úÔÚH1Ö®ºóµÄH2ÔªËØµÄ´¹Ö±¾àÀ룺
H1 + H2 { margin-top: -5mm }
ÏÂÃæµÄ¹æÔòͬÉÏÒ»¸öÀàËÆ£¬²»¹ýËü¼ÓÈëÁËÊôÐÔÑ¡Ôñ×Ó¡£Òò´ËÖ»Óе±H1¾ßÓÐclass="opener"Ààʱ£¬²ÅÓÐÌØ±ðµÄ¸ñʽ»¯£º
H1.opener + H2 { margin-top: -5mm }
CSS2ÔÊÐí×÷ÕßÖ¸¶¨¹æÔòÀ´Æ¥ÅäÔ´ÎĵµÖж¨ÒåµÄÊôÐÔ¡£
ÊôÐÔÑ¡Ôñ×ÓÓÐËÄÖÖÆ¥Å䷽ʽ£º
[att]
[att=val]
[att~=val]
[att|=val]
ÊôÐÔÖµ±ØÐëÊDZêʶ·û»ò×Ö·û´®¡£Ñ¡Ôñ×ÓÖÐÊôÐÔÃûºÍÖµµÄ´óСдÃô¸ÐÐÔÈ¡¾öÓÚÎĵµÓïÑÔµÄÃô¸ÐÐÔ¡£
ÀýÈ磬ÈçϵÄÊôÐÔÑ¡Ôñ×ÓÆ¥ÅäÄÇЩָ¶¨ÁË"title"ÊôÐÔµÄH1ÔªËØ£¬¶ø²»ÂÛÆäֵΪʲô£º
H1[title] { color: blue; }
ÏÂÃæÕâ¸öÀý×Ó£¬Ñ¡Ôñ×ÓÆ¥ÅäËùÓÐÖ¸¶¨"class"ÊôÐÔΪ"example"µÄSPANÔªËØ£º
SPAN[class=example] { color: blue; }
¶àÖØÊôÐÔÑ¡Ôñ×Ó¿ÉÒÔÓÃÀ´ÒýÓÃÒ»¸öÔªËØµÄ¼¸¸öÊôÐÔ£¬»ò¼¸´ÎͬһÊôÐԵijöÏÖ¡£
ÕâÀѡÔñ×ÓÆ¥ÅäÄÇЩSPANÔªËØ£¬Æä"hello"ÊôÐÔÉèÖÃΪ"Cleveland"¶ø"goodbye"ÊôÐÔÉèÖÃΪ"Columbus"£º
SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
ÏÂÃæµÄÑ¡Ôñ×ÓÏÔʾÁË"="ºÍ"~="µÄÇø±ð¡£ÀýÈ磬µÚÒ»¸öÑ¡Ôñ×ÓÆ¥Åä"rel"ÊôÐÔµÄ"copyright copyleft copyeditor"Öµ¡£¶øµÚ¶þ¸öÑ¡Ôñ×ÓֻƥÅä"href"ÊôÐÔֵΪ"http://www.w3.org/"¡£
A[rel~="copyright"] A[href="http://www.w3.org/"]
ÏÂÃæµÄ¹æÔò½«ËùÓÐ"lang"ÊôÐÔÉèÖÃΪ"fr"£¨¼´ÓïÖÖΪ·¨ÓµÄÔªËØµÄÏÔʾÊôÐԹرա£
*[LANG=fr] { display : none }
ÏÂÃæµÄ¹æÔò½«Æ¥Åä°üº¬ÒÔ"en"¿ªÍ·µÄ"lang"ÊôÐÔÖµµÄËùÓÐÔªËØ£¬°üÀ¨"en"£¬"en-US"ºÍ"en-cockney"£º
*[LANG|="en"] { color : red }
ÀàËÆµØ£¬ÏÂÃæµÄÓïÒôÑùʽ±í¹æÔòÔÊÐíÒ»¶ÎÎÄ×Ö¸ù¾Ý²»Í¬µÄ½ÇÉ«ÒÔ²»Í¬µÄÉùÒô¶Á³ö£º
DIALOGUE[character=romeo]
{ voice-family: "Lawrence Olivier", charles, male }
DIALOGUE[character=juliet]
{ voice-family: "Vivien Leigh", victoria, female }
Æ¥ÅäÓëÎĵµÊ÷ÖеÄÊôÐÔÖµ½ôÃÜÏà¹Ø¡£³ýÁËHTMLÓïÑÔ£¬ÆäËüÎĵµÓïÑÔµÄȱʡÊôÐÔ¿ÉÒÔ¶¨ÒåÔÚDTDÖлò±ðµÄµØ·½¡£Ñùʽ±íµÄÉè¼ÆÓ¦¸Ã±£Ö¤¼´Ê¹ÔÚÎĵµÊ÷ÖÐûÓаüº¬È±Ê¡Öµ£¬ËüÃÇÒ²¿ÉÒÔÕý³£¹¤×÷¡£
¼Ù¶¨ÎÒÃÇ¿¼ÂÇÒ»¸öÔªËØELEMENT£¬Ëü´øÓÐÒ»¸ö"notation"ÊôÐÔ£¬ÆäȱʡֵΪ"decimal"¡£ÔòDTD±íʾ¿ÉÒÔÊÇ£º
<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
Èç¹ûÑùʽ±í°üº¬ÈçϹæÔò£º
EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }
ÄÇôΪÁË¿¼ÂÇÊôÐÔÊÇȱʡµØÉèÖöø²»ÊÇÏÔʽµØÉèÖõÄÇé¿ö£¬¿ÉÒÔ¼ÓÈëÏÂÃæµÄ¹æÔò£º
EXAMPLE { /*... default property settings ...*/ }
ÓÉÓÚÕâһѡÔñ×ÓÓëÊôÐÔÑ¡Ôñ×ÓÏà±È£¬²»ÄÇô¾«È·£¬ËüÖ»¿ÉÒÔÓÃÔÚȱʡµÄÇé¿öÏ¡£×¢Ò⣬ÆäËüÊôÐÔºÍȱʡÊôÐÔµÄÑùʽ²»Í¬£¬ËüÃDZØÐë±»ÏÔʽµØ°üº¬¡£
ÔÚHTMLÑùʽ±íÖУ¬µ±Æ¥Åä"class"ÊôÐÔʱ£¬×÷Õß¿ÉÒÔʹÓõ㣨.£©·ûºÅÀ´×÷Ϊ"~="·ûºÅµÄÌæ´ú¡£Òò´Ë£¬HTMLÖÐ"DIV.value"ºÍ"DIV[class~=value]"Òâ˼ÊÇÒ»ÑùµÄ¡£ÊôÐÔÖµ±ØÐë½ô¸úÔÚ"."Ö®ºó¡£
ÀýÈ磬ÎÒÃÇ¿ÉÒÔΪËùÓÐclass~="pastoral"µÄÔªËØÖ¸¶¨ÑùʽÐÅÏ¢ÈçÏ£º
*.pastoral { color: green } /* all elements with class~=pastoral */
»òÕߣº
.pastoral { color: green } /* all elements with class~=pastoral */
ÏÂÃæµÄ¹æÔòÖ»¶Ôclass~="pastoral"µÄH1ÔªËØÖ¸¶¨Ñùʽ£º
H1.pastoral { color: green } /* H1 elements with class~=pastoral */
ÔÚÕâЩ¹æÔò×÷ÓÃÏ£¬ÏÂÃæÎÄ×ÖÖеĵÚÒ»¸öH1ÔªËØ²»ÊÇÂÌÉ«ÎÄ×Ö£¬¶øµÚ¶þ¸öÊÇÂÌÉ«ÎÄ×Ö£º
<H1>Not green</H1> <H1 class="pastoral">Very green</H1>
ҪƥÅä"class"ÖµµÄÒ»²¿·Ö¼¯ºÏ£¬Ã¿Ò»¸öÖµ¶¼±ØÐëÒÔ"."·Ö¸î£¬´ÎÐòÈÎÒâ¡£
ÀýÈ磬ÏÂÃæµÄ¹æÔòÆ¥ÅäÈÎÒâPÔªËØ£¬Èç¹ûËüµÄ"class"ÊôÐÔ±»Ö¸¶¨ÎªÒ»¸ö¿Õ¸ñ·Ö¸îµÄÁÐ±í£¬²¢ÇÒÆäÖаüº¬"pastoral"ºÍ"marine"£º
P.pastoral.marine { color: green }
¸Ã¹æÔòÆ¥Åäclass="pastoral blue aqua marine"¶ø²»Æ¥Åäclass="pastoral blue"¡£
×¢Ò⣡CSS¸øÓè"class"ÊôÐÔºÜÇ¿µÄÄÜÁ¦£¬»ùÓÚûÓгÊÏÖÄÚÈݵÄÔªËØ£¨ÈçHTMLÖеÄDIVºÍSPAN£©£¬Óû§¼¸ºõ¿ÉÒÔÉè¼Æ×Ô¼ºµÄ¡°ÎĵµÓïÑÔ¡±£¬²¢Í¨¹ý"class"ÊôÐÔÀ´Ö¸¶¨ÑùʽÐÅÏ¢¡£×÷ÕßÓ¦¸Ã±ÜÃâÕâÒ»³¢ÊÔ¡£ÕâÊÇÒòΪÎĵµÓïÑԵĽṹ»¯ÔªËØÍ¨³£¶¼Óй«ÈϺÍÈϿɵĺ¬Ò壬¶ø×÷Õß×Ô¶¨ÒåµÄÀàÈ´²»ÊÇÈç´Ë¡£
ÎĵµÓïÑÔ¿ÉÒÔ°üº¬ÉùÃ÷ΪIDÀàÐ͵ÄÊôÐÔ¡£IDÀàÐÍÊôÐÔµÄÌØÊâÖ®´¦ÔÚÓÚ£¬Ã»ÓÐÁ½¸öÊôÐÔ¿ÉÒÔÓÐÏàͬµÄÖµ£»²»¹ÜÎĵµÓïÑÔÊÇʲô£¬IDÊôÐÔ¿ÉÒÔÓÃÀ´µ¥Ò»µØÖ¸¶¨ËüµÄÔªËØ¡£ÔÚHTMLÖУ¬IDÊôÐÔ¶¼±»ÃüÃûΪ"id"£»XMLÓ¦ÓÿÉÄܲÉÈ¡²»Í¬µÄ·½·¨ÃüÃûIDÊôÐÔ£¬²»¹ýÒ²ÓÐͬÑùµÄÏÞÖÆ¡£
ÎĵµÓïÑÔÖеÄIDÊôÐÔÔÊÐí×÷ÕßΪÎĵµÊ÷ÖÐÔªËØµÄÒ»¸öʵÀýÖ¸¶¨Ò»¸ö±êʶ·û¡£CSS IDÑ¡Ôñ×Ó»ùÓÚÔªËØµÄ±êʶ·ûÀ´Æ¥ÅäÒ»¸öÔªËØ¡£CSS IDÑ¡Ôñ×Ó°üº¬Ò»¸ö"#"£¬½ô¸úÔÚºóµÄÊÇIDÖµ¡£
ÏÂÃæµÄIDÑ¡Ôñ×ÓÆ¥ÅäIDÊôÐÔֵΪ"chapter1"µÄH1ÔªËØ£º
H1#chapter1 { text-align: center }
ÔÚÏÂÃæµÄÀý×ÓÖУ¬Ñùʽ¹æÔòÆ¥ÅäIDֵΪ"z98y"µÄÔªËØ¡£Òò´Ë£¬¹æÔòÆ¥ÅäPÔªËØ£º
<HEAD>
<TITLE>Æ¥ÅäPÔªËØ</TITLE>
<STYLE type="text/css">
*#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>¿íÎı¾</P>
</BODY>
ÏÂÒ»¸öÀý×ÓÖУ¬Ñùʽ¹æÔòֻƥÅäIDֵΪ"z98y"µÄH1ÔªËØ£¬¶ø²»Æ¥ÅäÀý×ÓÖеÄPÔªËØ£º
<HEAD>
<TITLE>ֻƥÅäH1</TITLE>
<STYLE type="text/css">
H1#z98y { letter-spacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>¿íÎı¾</P>
</BODY>
IDÑ¡Ôñ×Ó±ÈÊôÐÔÑ¡Ôñ×Ó¾ßÓиü¸ßµÄÓÅÏȼ¶¡£ÀýÈ磬ÔÚHTMLÖУ¬´Ó²ãµþµÄ½Ç¶È˵£¬Ñ¡Ôñ×Ó#p123±È[ID=p123]¸üÃ÷È·¡£
×¢Ò⣡ÔÚXML 1.0[XML10]£¬¹ØÓÚÄĸöÊôÐÔ°üº¬ÁËÔªËØµÄIDµÄÐÅÏ¢£¬´æ·ÅÔÚDTDÖС£½âÎöXMLʱ£¬Óû§¶Ë²»×ÜÊÇÔĶÁDTD£¬Òò´Ë¿ÉÄܲ»ÖªµÀÔªËØµÄIDÊÇʲô¡£Èç¹ûÑùʽ±íµÄÉè¼ÆÕßÖªµÀ»ò»³ÒÉÕâÀïÓÐÎÊÌ⣬ËûÓ¦¸Ã¸ÄΪʹÓÃÒ»°ãµÄÊôÐÔÑ¡Ôñ×Ó£º[name=p371]À´´úÌæ#p371¡£È»¶ø£¬Ò»°ãÊôÐÔÑ¡Ôñ×ӵIJãµþ´ÎÐòºÍIDÑ¡Ôñ×Ó²»Í¬¡£¿ÉÄÜÐèҪΪÉùÃ÷¼ÓÈëÒ»¸ö"!important"ÓÅÏÈȨ£º[name=p371]{color: red ! important}¡£µ±È»£¬XML 1.0ÎĵµÖеÄÔªËØÈç¹ûûÓÐDTD£¬Ò²¾Í¸ù±¾Ã»ÓÐID¡£
CSS2ÖУ¬ÑùʽºÍÔªËØµÄÁ¬½ÓÒ»°ãÊÇ»ùÓÚÔªËØÔÚÎĵµÊ÷ÖеÄλÖá£ÕâÒ»¼ò»¯µÄÄ£ÐͶÔÓڴ󲿷ÖÇé¿öÊÇ×ã¹»µÄ¡£²»¹ýÓÉÓÚÎĵµÊ÷½á¹¹µÄÏÞÖÆ£¬Ò»Ð©³£ÓõÄӡˢЧ¹û¿ÉÄÜÎÞ·¨´ïµ½¡£ÀýÈ磬ÔÚHTML 4.0£¨²Î¼û[HTML40]£©ÖУ¬Ã»ÓÐÔªËØ¿ÉÒÔÀ´ÒýÓÃÒ»¸ö¶ÎÂäµÄµÚÒ»ÐУ¬Òò´ËҲûÓÐÒ»¸ö¼òµ¥µÄCSSÑ¡Ôñ×Ó¿ÉÒÔÒýÓÃËü¡£
CSSÒýÈëÁËÎ±ÔªËØºÍαÀàµÄ¸ÅÄÔÊÐí¶ÔÎĵµÊ÷Ö®ÍâµÄÐÅÏ¢½øÐиñʽ»¯¡£
ÎÞÂÛÊÇÎ±ÔªËØ»òαÀ࣬ËüÃǶ¼²»³öÏÖÔÚÔ´Îĵµ»òÎĵµÊ÷ÖС£
αÀà¿ÉÒÔÔÚÑ¡Ôñ×ÓÖеÄÈκÎλÖóöÏÖ£¬¶øÎ±ÔªËØÖ»¿ÉÒÔ³öÏÖÔÚÑ¡Ôñ×ÓµÄÖ÷ÌâÖ®ºó¡£
Î±ÔªËØºÍαÀàµÄÃû³ÆÊÇÓë´óСдÏà¹ØµÄ¡£
ijЩαÀàÊÇÏ໥ÅųâµÄ£¬¶øÆäËüһЩ¿ÉÒÔͬʱӦÓõ½Í¬Ò»ÔªËØÉÏ¡£Èç¹û³öÏÖ¹æÔò³åÍ»£¬³£¹æµÄ²ãµþ´ÎÐò¾ö¶¨ÁË×îºó½á¹û¡£
ÓëCSSÒ»ÖµÄHTMLÓû§¶Ë¿ÉÄܺöÂÔËùÓдøÓÐ:first-line»ò:first-letterµÄ¹æÔò£¬»òÕߣ¬ËüÃÇÖ»Ö§³ÖÕâÐ©Î±ÔªËØÊôÐÔµÄÒ»¸ö×Ó¼¯¡£
:first-childαÀàÆ¥ÅäÒ»¸öÊÇÁíÍâÒ»¸öÔªËØµÄµÚÒ»¸ö×ÓÔªËØµÄÔªËØ¡£
ÏÂÀýÖУ¬Ñ¡Ôñ×ÓÆ¥ÅäÈκÎÒ»¸öÊÇDIVÔªËØµÄµÚÒ»¸ö×ÓÔªËØµÄPÔªËØ¡£¸Ã¹æÔòÈ¡ÏûÁËDIVÖеÚÒ»¸ö¶ÎÂäµÄËõ½ø£º
DIV > P:first-child { text-indent: 0 }
ÕâһѡÔñ×Ó½«Æ¥ÅäÏÂÃæÓï¾äÖÐÔÚDIVÄÚµÄPÔªËØ£º
<P>ÔÚ×¢ÊÍ֮ǰµÄ×îºóÒ»¸öPÔªËØ¡£ <DIV class="note"> <P> ÔÚ×¢ÊÍÖ®ÖеĵÚÒ»¸öPÔªËØ¡£ </DIV>µ«ÊDz»Æ¥ÅäÏÂÃæÓï¾äÖеĵڶþ¸öPÔªËØ£º
<P> ÔÚ×¢ÊÍ֮ǰµÄ×îºóÒ»¸öPÔªËØ¡£ <DIV class="note"> <H2>×¢ÊÍ</H2> <P> ÔÚ×¢ÊÍÖ®ÖеĵÚÒ»¸öPÔªËØ¡£ </DIV>
ÏÂÃæµÄ¹æÔòÆ¥ÅäµÄÌõ¼þÊÇ£ºÈç¹ûPÔªËØÊÇij¸öÔªËØµÄµÚÒ»¸ö×ÓÔªËØ£¬ÇÒEMÔªËØÊÇËüµÄºó´ú£¬ÄÇô½«EMÔªËØµÄ×ÖÌåÖØÁ¿ÉèÖÃΪ'bold'£º
P:first-child EM { font-weight : bold }
×¢Ò⣬ÓÉÓÚÄäÃû¿ØÖÆ¿ò²»ÊÇÎĵµÊ÷µÄÒ»²¿·Ö£¬ÔÚ¼ÆËãµÚÒ»¸ö×ÓÔªËØÊ±£¬ËüÃDz»°üº¬ÔÚÄÚ¡£
ÀýÈ磬ÏÂÃæµÄEMÔªËØ£º
<P>abc <EM>default</EM>ÊÇPÔªËØµÄµÚÒ»¸ö×ÓÔªËØ¡£
ÏÂÃæÁ½¸öÑ¡Ôñ×ÓÊÇÒ»ÑùµÄ£º
* > A:first-child /* AÊÇÈÎÒâÔªËØµÄµÚÒ»¸ö×ÓÔªËØ */ A:first-child /* ͬÉÏ */
Óû§¶ËÏÔʾδ·ÃÎʵÄÁ¬½ÓºÍÒÑ·ÃÎʵÄÁ¬½Óʱ£¬×ÜÓÐһЩ²»Í¬¡£CSSÌṩÁËαÀà':link'ºÍ':visited'À´¼ÓÒÔÇø·Ö£º
×¢Ò⣡¾¹ýÒ»¶ÎÌØ¶¨µÄʱ¼äºó£¬Óû§¶Ë¿ÉÒÔÑ¡Ôñ½«ÒѾ·ÃÎʵÄÁ¬½Ó»Ö¸´µ½£¨Î´·ÃÎʵģ©':link'״̬¡£
ÕâÁ½¸ö״̬ÊÇ»¥ÏàÅųâµÄ¡£
ÎĵµÓïÑÔ¾ö¶¨ÄÄÐ©ÔªËØÊdz¬Á¬½ÓµÄÔ´Á´¡£ÀýÈ磬ÔÚHTML 4.0ÖУ¬Á¬½ÓαÀàÊÊÓÃÓÚ´øÓÐ"href"ÊôÐÔµÄAÔªËØ¡£Òò´Ë£¬ÏÂÃæµÄÁ½¸öCSS2ÉùÃ÷Ч¹ûÒ»Ñù£º
A:link { color: red }
:link { color: red }
Èç¹ûÏÂÃæµÄÁ¬½Ó£º
<A class="external" href="http://out.side/">external link</A>ÒѾ±»·ÃÎÊ£¬¹æÔò£º
A.external:visited { color: blue }
½«Ê¹Ëü³ÉΪÀ¶É«¡£
½»»¥µÄÓû§¶ËÓÐʱ¸ù¾ÝÓû§µÄ¶¯×÷¸Ä±ääÖȾЧ¹û¡£CSSΪͨÓõÄÇé¿öÌṩÈý¸öαÀࣺ
ÕâЩαÀ໥²»Åų⡣һ¸öÔªËØÍ¬Ê±¿ÉÒÔÆ¥ÅäÆäÖеÄÈô¸É¸ö¡£
CSS²¢Ã»Óй涨ÄÄÐ©ÔªËØ¿ÉÒÔÓÉÉÏÊöµÄ״̬£¬»òÕßÈçºÎ½øÈëºÍÀ뿪ÕâЩ״̬¡£½Å±¾¿ÉÒԸıäÔªËØÊÇ·ñÏàÓ¦Óû§Ê¼þ¡£²»Í¬µÄÉ豸ºÍÓû§¶Ë¶ÔÓÚÖ¸ÏòºÍ¼¤»îÔªËØµÄ±íÏÖ·½·¨¿ÉÄÜÓÐËù²»Í¬¡£
Óû§¶Ë²»±ØÒòΪαÀàµÄ±ä»»¶øÖØÐÂÅÅÁе±Ç°ÏÔʾµÄÎĵµ¡£ÀýÈ磬һ¸öÑùʽ±í¿ÉÒÔÖ¸¶¨Ò»¸ö:activeÁ¬½ÓµÄ'font-size'Òª±ÈÒ»¸öδ¼¤»îµÄÁ¬½Ó´ó¡£²»¹ýÓÉÓÚÕâ¿ÉÄÜ»áÔÚ¶ÁÕßÑ¡Ôñ¸ÃÁ¬½Óʱ£¬¸Ä±ä×ÖĸµÄλÖã¬Óû§¶Ë¿ÉÒÔºöÂÔÏàÓ¦µÄÑùʽ¹æÔò¡£
A:link { color: red } /* unvisited links */
A:visited { color: blue } /* visited links */
A:hover { color: yellow } /* user hovers */
A:active { color: lime } /* active links */
×¢Ò⣬A:hover±ØÐë·ÅÖÃÔÚA:linkºÍA:visited¹æÔòÖ®ºó£¬·ñÔò²ãµþ¹æÔò½«Òþ²ØA:hoverµÄ'color'ÊôÐÔ¡£Í¬ÑùµÄ£¬ÓÉÓÚA:active·ÅÖÃÔÚA:hoverÖ®ºó£¬¼¤»îµÄÑÕÉ«£¨lime£©ÔÚÓû§¼È¼¤»îÓÖÖ¸ÏòAÔªËØÊ±Ó¦Óá£
Ò»¸ö½áºÏ¶¯Ì¬Î±ÀàµÄÀý×Ó£º
A:focus { background: yellow }
A:focus:hover { background: white }
µÚ¶þ¸öÑ¡Ôñ×ÓÆ¥ÅäÔÚαÀà:focusºÍαÀà:hoverÖеÄAÔªËØ¡£
ÒªÁ˽⽹µãÍâÀª³ÊÏÖµÄÐÅÏ¢£¬Çë²Î¼û¶¯Ì¬½¹µãÍâÀªÒ»½Ú¡£
×¢Ò⣡ÔÚCSS1ÖУ¬':active'αÀàºÍ':link'¡¢':visited'ÊÇ»¥ÏàÅųâµÄ¡£ÏÖÔÚÒѾ²»ÊÇÕâÑùÁË¡£Ò»¸öÔªËØ¿ÉÒÔ¼ÈÊÇ':visited'ÓÖÊÇ':active'£¨»ò¼ÈÊÇ':link'ÓÖÊÇ':active'£©¡£¾ßÌåÊÊÓÃÄÄÒ»¸öÊôÐÔÓÉÒ»°ãµÄ²ãµþ¹æÔò¾ö¶¨¡£
Èç¹ûÎĵµÓïÑԹ涨ÁËÒ»¸öÔªËØµÄ×ÔÈ»ÓïÑÔÊÇÈçºÎ¶¨ÒåµÄ£¬¾Í¿ÉÄÜ»ùÓÚÔªËØµÄÓïÑÔ£¬Ð´³öCSSµÄÑ¡Ôñ×ÓÀ´Æ¥ÅäËü¡£ÀýÈ磬ÔÚHTML[HTML40]ÖУ¬ÓïÑÔÊÇÓÉ"lang"ÊôÐÔ¡¢METAÔªËØ¡¢¿ÉÄÜ»¹ÓдÓÐÒéµÃµ½µÄÐÅÏ¢£¨ÈçHTTPÍ·£©µÄ×éºÏ¾ö¶¨µÄ¡£XMLʹÓÃÒ»¸öXML:LANGÊôÐÔ¡£¿ÉÄÜ»¹ÓÐÆäËüÈ·¶¨ÎĵµÓïÑԵķ½·¨¡£
αÀà':lang(C)'Æ¥ÅäÒÔÓïÑÔC±íʾµÄÔªËØ¡£ÕâÀïCÊÇÒ»¸öÓïÑÔ´úÂ룬¶¨ÒåÔÚHTML 4.0[HTML40]ÒÔ¼°RFC 1766 [RFC1766]ÖС£ËüµÄÆ¥Å䷽ʽºÍ'|='²Ù×÷·ûÒ»Ñù¡£
ÏÂÃæÕâЩ¹æÔòΪÒÔ·¨Óï»òµÂÓïд³ÉµÄHTMLÎĵµÉèÖÃÒýºÅ£º
HTML:lang(fr) { quotes: '« ' ' »' }
HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }
µÚ¶þ¶Ô¹æÔòʵ¼ÊÉÏÊǸù¾ÝQÔªËØµÄ¸¸ÔªËصÄÓïÑÔ£¬À´ÉèÖÃQÔªËØµÄ'quotes'ÊôÐÔ¡£ÕâÊÇÒòΪÒýºÅµÄÑ¡Ôñͨ³£ÊÇ»ùÓÚÒýÓïÖÜÎ§ÔªËØµÄÓïÑÔ£¬¶ø²»ÊÇÒýÓï±¾Éí£ºÏÂÃæÕâ¸ö·¨ÓïÆ¬¶Î“à l'improviste”°üº¬ÔÚÖÐÎÄÎı¾ÖУ¬Òò´ËʹÓÃÖÐÎĵÄÒýºÅ¡£
:first-lineÎ±ÔªËØ¶ÔÒ»¸ö¶ÎÂäµÄµÚÒ»¸ö¸ñʽ»¯µÄÐÐÓ¦ÓÃÌØÊâµÄÑùʽ¡£ÀýÈ磺
P:first-line { text-transform: uppercase }
ÉÏÃæµÄÕâ¸ö¹æÔòÒâζ×Å¡°½«Ã¿Ò»¶ÎµÄµÚÒ»ÐеÄ×Öĸ¸ÄΪ´óд¡±¡£²»¹ý£¬Ñ¡Ôñ×Ó"P:first-line"²¢²»Æ¥ÅäÈκÎʵ¼ÊµÄHTMLÔªËØ¡£ËüÆ¥ÅäÓÉÓëCSSÒ»ÖµÄÓû§¶ËÔÚÿһ¶Î¿ªÊ¼²åÈëµÄÒ»¸öÎ±ÔªËØ¡£
×¢Ò⣬µÚÒ»Ðеij¤¶ÈÈ¡¾öÓںܶàÒòËØ£¬ÈçÒ³ÃæµÄ¿í¶È£¬×ÖÌå³ß´çµÈµÈ¡£Òò´Ë£¬ÈçϵÄÒ»¸öºÜÆÕͨµÄHTML¶ÎÂ䣺
<P>This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>¿ÉÄܵķÖÐÐÈçÏ£º
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.Óû§¶Ë¿ÉÄܼÓÒÔ¡°ÖØÐ´¡±ÒÔ°üº¬:first-lineµÄÐé¹¹±ê¼ÇÐòÁС£ÕâÒ»Ðé¹¹±ê¼ÇÐòÁÐÏÔʾÁËÊôÐÔÊÇÈçºÎ¼Ì³ÐµÄ¡£
<P><P:first-line> This is a somewhat long HTML paragraph that will </P:first-line> be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
Èç¹ûÒ»¸öÎ±ÔªËØ½Ø¶ÏÁËÒ»¸öʵ¼ÊµÄÔªËØ£¬ÔòÐèÒªµÄЧ¹ûͨ³£¿ÉÒÔͨ¹ýÒ»¸öÐé¹¹±ê¼ÇÐòÁÐÀ´´ïµ½¡£¸ÄÐòÁйرղ¢ÖØÐ´ò¿ª¸ÄÕâÒ»±»½Ø¶ÏµÄÔªËØ¡£Òò´Ë£¬Èç¹ûÎÒÃÇÔÚÉÏÃæµÄÀý×ÓÖмÓÈëÒ»¸öSPANÔªËØ£º
<P><SPAN class="test"> This is a somewhat long HTML paragraph that will be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>Óû§¶Ë¿ÉÄÜÔÚΪ:first-line²åÈëÐé¹¹±ê¼ÇÐòÁÐʱ£¬ÎªSPAN¼ÓÈ뿪ʼºÍ½áÊø±ê¼Ç£º
<P><P:first-line><SPAN class="test"> This is a somewhat long HTML paragraph that will </SPAN></P:first-line><SPAN class="test"> be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
:first-lineÎ±ÔªËØÖ»¿ÉÒԺͿéÀàÔªËØÁ¬Óá£
:first-lineÎ±ÔªËØºÍÐÐÄÚÔªËØÀàËÆ£¬µ«ÊÇÓÐÒ»Ð©ÌØ¶¨µÄÏÞÖÆ¡£Ö»ÓÐÏÂÁÐÊôÐÔ¿ÉÒÔÓ¦ÓÃÔÚ:first-lineÎ±ÔªËØ£º×ÖÌåÊôÐÔ£¬ÑÕÉ«ÊôÐÔ£¬±³¾°ÊôÐÔ£¬'word-spacing'£¬'letter-spacing'£¬'text-decoration'£¬£¬'vertical-align'£¬'text-transform'£¬'line-height'£¬'text-shadow'ÒÔ¼°'clear'¡£
:first-letterÎ±ÔªËØ¿ÉÒÔÓÃÓÚ¡°´ÊÊ×´óд¡±ÒÔ¼°¡°´óд×ÖĸϳÁ¡±£¬ÕâЩ¶¼Êdz£ÓõÄӡˢЧ¹û¡£ÕâÒ»ÀàµÄÊ××ÖĸºÍÒ»¸öÐÐÄÚÔªËØÀàËÆ£¬Èç¹ûËüµÄ'float'ÊôÐÔÊÇ'none'£¬·ñÔòËüºÍÒ»¸ö¸¡¶¯ÔªËØÀàËÆ¡£
ÕâЩÊÇ¿ÉÒÔÓ¦ÓÃÔÚ:first-letterÎ±ÔªËØÉϵÄÊôÐÔ£º×ÖÌåÊôÐÔ£¬ÑÕÉ«ÊôÐÔ£¬±³¾°ÊôÐÔ£¬'text-decoration'£¬'vertical-align'£¨½öµ±'float'Ϊ'none'ʱ£©£¬'text-transform'£¬'line-height'£¬±ß¾àÊôÐÔ£¬±ß°×ÊôÐÔ£¬±ß¿òÊôÐÔ£¬'float'£¬'text-shadow'ÒÔ¼°'clear'¡£
ÈçϵÄCSS2¹æÔò½«Ê¹Ê××ÖĸϳÁÀ©Õ¹ÎªÁ½ÐУº
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>
ÕâÒ»Àý×ӵĸñʽ»¯Ð§¹û¿ÉÄÜΪ£º
Ðé¹¹±ê¼ÇÐòÁÐΪ£º
<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>
×¢Ò⣬:first-letterÎ±ÔªËØ±ê¼ÇÓëÄÚÈÝ£¨¼ÈµÚÒ»¸ö×Ö·û£©ÅþÁÚ£¬¶ø:first-lineÎ±ÔªËØµÄ¿ªÊ¼±ê¼Ç²åÈëÔÚÎ±ÔªËØËùÁ¬µÄÔªËØµÄ¿ªÊ¼±ê¼ÇÖ®ºó¡£
ΪÁ˵õ½³£¹æµÄ×ÖĸϳÁ¸ñʽ£¬Óû§Òª¶Ô×ÖÌå³ß´ç½øÐнüËÆ£¬ÀýÈç¶ÔÆä»ùÏß¡£Í¬ÑùµÄ£¬¸ñʽ»¯Ê±£¬Ò²Òª¿¼ÂÇ×ÖÐÍÍâÀª¡£
±êµã·ûºÅ£¨¼´¶¨ÒåΪUnicode [UNICODE]ÖÐ"open" (Ps)£¬ "close" (Pe)ºÍ"other" (Po)±êµã·ûºÅÀàÖеÄ×Ö·û£©£¬Èç¹û³öÏÖÔÚÊ××Öĸǰ£¬Ò²Òª°üº¬ÔÚÄÚ£º
:first-letterÎ±ÔªËØÖ»Æ¥Åä¿éÀàÔªËØµÄÒ»²¿·Ö¡£
ijЩÓïÑÔ¶ÔÓÚÈçºÎ´¦ÀíÌØ¶¨µÄ×Öĸ×éºÏ¿ÉÄÜÓÐÌØ±ðµÄ¹æÔò¡£ÀýÈ磬ÔÚµÂÓïÖУ¬Èç¹û×Öĸ×éºÏ"ij"³öÏÖÔÚÒ»¸öµ¥´ÊµÄ¿ªÍ·£¬ÕâÁ½¸ö×Öĸ¶¼±»ÈÏΪÊÇÔÚ:first-letterÎ±ÔªËØÖ®ÄÚ¡£
ÏÂÃæµÄÀý×ÓÏÔʾÁË»¥ÏàÖØµþµÄÎ±ÔªËØÈçºÎÏ໥×÷Óá£Ã¿Ò»¸öPÔªËØµÄµÚÒ»¸ö×ÖĸÊÇÂÌÉ«µÄ£¬×ÖÌå³ß´çΪ'24pt'¡£µÚÒ»¸ö¸ñʽÐÐµÄÆäËü²¿·ÖÊÇÀ¶É«µÄ£¬¶ø¶ÎÂäµÄÆäËü²¿·ÖµÄÑÕÉ«ÊÇ'red'¡£
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Some text that ends up on two lines</P>
¼Ù¶¨ÔÚ"ends"ǰÓÐÒ»¸ö·ÖÐУ¬ÄÇôÕâһƬ¶ÎµÄÐé¹¹±ê¼ÇÐòÁÐΪ£º
<P> <P:first-line> <P:first-letter> S </P:first-letter>ome text that </P:first-line> ends up on two lines </P>
×¢Ò⣬:first-letterÔªËØÔÚ:first-lineÔªËØÖ®ÄÚ¡£ÉèÖÃÔÚ:first-lineÉϵÄÊôÐÔ½«Îª:first-letter¼Ì³Ð£¬µ«ÊÇÈç¹û:first-letterÉèÖÃÁËÏàͬµÄÊôÐÔ£¬Ôò¼Ì³ÐµÄÊôÐÔ±»³¬Ô½¡£
':before'ºÍ':after'Î±ÔªËØÓÃÀ´ÔÚÒ»¸öÔªËØµÄÄÚÈÝ֮ǰ»òÖ®ºó²åÈëÉú³ÉµÄÄÚÈÝ¡£ËüÃǵÄÃèÊö²Î¼ûÉú³ÉµÄÄÚÈÝÒ»½Ú¡£
H1:before {content: counter(chapno, upper-roman) ". "}
µ±:first-letterºÍ:first-lineÎ±ÔªËØÓë:beforeºÍ:afterÏà½áºÏʱ£¬ËüÃÇÓ¦ÓÃÓÚ°üº¬²åÈëµÄÎı¾µÄµÚÒ»¸ö×Öĸ»òµÚÒ»ÐС£
P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}
Ëü½«"Special!"ÖеÄ"S"µÄÑÕÉ«ÉèÖÃΪ½ðÉ«¡£